<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="名称" prop="configName">
        <el-input
          v-model="queryParams.configName"
          placeholder="请输入名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="配置名称" prop="configName" />
      <el-table-column label="源文档语言" prop="corpusLanguage" />
      <el-table-column label="用于生成FAQ的角色列表" prop="faqCharacters"/>
      <el-table-column label="生成FAQ语言" prop="outputLanguage"/>
      <el-table-column label="vLLM服务的API地址" prop="vllmApiBase"/>
      <el-table-column label="vLLM服务API key" prop="vllmApiKey"/>
      <el-table-column label="模型名称" prop="vllmModelName"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            style="red"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="700px" append-to-body>
      <el-form ref="form" :model="form"  label-width="190px" :rules="rules">
        <el-form-item label="名称" prop="configName">
          <el-input v-model="form.configName" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="源文档语言" prop="corpusLanguage">
          <el-select v-model="form.corpusLanguage" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用模型思考模式" prop="enableThinking">
          <el-radio v-model="form.enableThinking" :label="false">否</el-radio>
          <el-radio v-model="form.enableThinking" :label="true">是</el-radio>
        </el-form-item>
        <el-form-item label="用于生成FAQ的角色列表" prop="faqCharacters">
          <el-select v-model="form.faqCharacters" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生成FAQ长度描述">
          <el-input v-model="form.faqLength" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="单次生成允许的最大token数">
          <el-input-number v-model="form.maxTokens" :min="1" :max="16384"></el-input-number>
        </el-form-item>
        <el-form-item label="生成FAQ语言" prop="outputLanguage">
          <el-select v-model="form.outputLanguage" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="控制生产的随机性">
          <el-input-number v-model="form.temperature" :min="0" :max="2" :step="0.1"></el-input-number>
        </el-form-item>
        <el-form-item label="核心采样数">
          <el-input-number v-model="form.topP" :min="0" :max="1" :step="0.1"></el-input-number>
        </el-form-item>
        <el-form-item label="目标vLLM服务的API地址" prop="vllmApiBase">
          <el-input v-model="form.vllmApiBase" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="访问vLLM服务的API key">
          <el-input v-model="form.vllmApiKey" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="模型名称" prop="apiModelName">
          <el-select v-model="form.vllmModelName">
            <el-option
              v-for="item in apiModelOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" style="width: 80%"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createQnaList,addCreateQna,updateCreateQna,delCreateQna } from '@/api/createQna/index'

export default {
  data() {
    return {
      loading: true,
      total: 0,
      title: "大模型配置",
      dateRange: [],
      queryParams: {
        configName: undefined
      },
      tableList:[],
      form:{
        configName:'',
        corpusLanguage:'',
        enableThinking: false,
        faqCharacters:'',
        faqLength:'',
        maxTokens:2048,
        outputLanguage:'',
        remark:'',
        temperature: 0,
        topP: 0,
        vllmApiBase: '',
        vllmApiKey: '',
        vllmModelName:'',
      },
      rules: {
        configName: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        enableThinking: [
          { required: true, message: '请选择源文档语言', trigger: 'blur' }
        ],
        corpusLanguage: [
          { required: true, message: '请选择是否启用模型思考模式', trigger: 'blur' }
        ],
        faqCharacters: [
          { required: true, message: '请选择用于生成FAQ的角色列表', trigger: 'blur' }
        ],
        outputLanguage: [
          { required: true, message: '请选择生成源文档语言', trigger: 'blur' }
        ],
        vllmApiBase: [
          { required: true, message: '请输入目标vLLM服务的API地址', trigger: 'blur' }
        ],
      },
      dialogVisible: false,
      options: [{
        value: 'Chinese',
        label: 'Chinese'
      }, {
        value: 'English',
        label: 'English'
      }],
      options2: [{
        value: '在家的老人',
        label: '在家的老人'
      }, {
        value: '在校的大学生',
        label: '在校的大学生'
      }, {
        value: '教中学的老师',
        label: '教中学的老师'
      }],
      apiModelOptions:['gpt-3.5-turbo','gpt-3.5-turbo-1106','gpt-3.5-turbo-0125','gpt-3.5-turbo-instruct','gpt-3.5-turbo-16k',
        'gpt-3.5-turbo-16k-0613','gpt-3.5-turbo-16k-0301','gpt-4-0125-preview','qwen-turbo-2025-07-15'],
    };
  },
  created() {
    this.modelDefault = JSON.parse(JSON.stringify(this.form));
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      createQnaList(this.queryParams).then(res => {
        this.tableList = res.data;
        this.loading = false;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd() {
      this.dialogVisible = true;
      this.form = Object.assign({},this.modelDefault)
    },
    submitData(){
      this.$refs.form.validate(valid => {
        if (valid) {
          if(this.form.id){
            updateCreateQna(this.form).then(res => {
              this.$message.success('编辑成功');
              this.dialogVisible = false
              this.resetQuery()
            })
          }else{
            addCreateQna(this.form).then(res => {
              this.$message.success('新增成功');
              this.dialogVisible = false
              this.resetQuery()
            })
          }
        }
      })
    },
    handleUpdate(row){
      this.dialogVisible = true;
      this.form = Object.assign({},row)
    },
    handleDelete(row){
      delCreateQna({id:row.id}).then(res => {
        this.$message.success('删除成功');
        this.resetQuery()
      })
    }
  }
};
</script>
